import React from 'react';

export default class TodoFooter extends React.Component{

render(){
    return(
        <div className="row">
            <div className="col-md-4 text-center">
                {this.props.activeCount>0?<div>你还有 <span className="badge">{this.props.activeCount}</span>件代办事项</div>:''}
            </div>
            <div className="col-md-5 text-center">
                <button  type="button" className={`btn btn-xs ${this.props.filterType==='all'?'btn-success':'btn-default'}`} onClick={()=>this.props.select('all')}>全部</button>
                <button  type="button"  className={`btn btn-xs ${this.props.filterType==='active'?'btn-success':'btn-default'}`}  style={{marginLeft:'10px'}} onClick={()=>this.props.select('active')}>未完成</button>
                <button  type="button"  className={`btn btn-xs ${this.props.filterType==='completed'?'btn-success':'btn-default'}`}  style={{marginLeft:'10px'}} onClick={()=>this.props.select('completed')}>已完成</button>
            </div>
            <div className="col-md-3 text-center">
                {this.props.completedCount>0?<button className='btn btn-danger btn-xs' onClick={this.props.removeCompleted}>删除已完成的</button>:''}

            </div>
        </div>
    )
 }
}